<template>
  <div>
    <Header>
      <el-button size="small" type="primary" @click="visible = 'employees'"
        >添加员工</el-button
      >
      <el-button size="small" type="primary" @click="edit('')"
        >修改绑定关系</el-button
      >
    </Header>
    <Header :type="'screening'" @tag="getList" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择等级：
        </span>
        <el-select
          v-model="selectVal"
          placeholder="请选择"
          size="small"
          class="head-input"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <span class="head-label">
          内容搜索：
        </span>
        <el-input
          v-model="searchName"
          placeholder="请输入名称"
          size="small"
          class="head-select-input"
        >
          <el-select
            slot="prepend"
            v-model="selectThree"
            style=" width: 126px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsThree"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-input>
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择时间：
        </span>
        <div class="head-time">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            style="width:100%;"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
    </Header>
    <Main
      :data="listData"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        label="分销员名称"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column label="分销员头像" align="center">
        <template slot-scope="scope">
          <img
            :src="$store.state.qiniu + scope.row.cover + $store.state.imgRotate"
            width="80px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="所属门店"
        align="center"
        property="store"
      ></el-table-column>
      <el-table-column
        label="绑定客户数"
        align="center"
        property="members"
      ></el-table-column>
      <el-table-column
        label="成为分销员时间"
        align="center"
        property="distribute_time"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.distribute_status == 1" style="color:#67C23A;">
            正常
          </span>
          <span v-if="scope.row.distribute_status == 2" style="color:#F56C6C;">
            冻结
          </span>
          <span v-if="scope.row.distribute_status == 3" style="color:#F56C6C;">
            已离职
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.distribute_status == 3">
            <el-button
              size="mini"
              type="text"
              @click="del(scope.row.member_id)"
            >
              删除员工
            </el-button>
          </div>
          <div v-else>
            <el-button size="mini" type="text" @click="departure(scope.row)">
              离职操作
            </el-button>
            <el-button size="mini" type="text" @click="edit(scope.row)">
              修改关系
            </el-button>
          </div>
        </template>
      </el-table-column>
    </Main>

    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <employees :visible="visible === 'employees'" @outDialog="outDialog" />
    <chain
      :visible="visible === 'internalChain'"
      :val="Val"
      @outDialog="outDialog"
    />
  </div>
</template>
<script>
import {
  DISTRIBUTORLIST,
  CURRENTSTAFFINFORMATION,
  STAFFQUIT,
  EDITSTAFFTOUSER
} from "../../service";

export default {
  components: {
    employees: () => import("./component/employees"),
    chain: () => import("./component/chain")
  },
  data() {
    return {
      activeName: "user",
      listData: [],
      selectVal: 0,
      selectThree: 0,
      options: [
        { label: "全部员工状态", value: 0 },
        { label: "正常", value: 1 },
        { label: "已离职", value: 3 }
      ],
      optionsThree: [
        { label: "员工昵称", value: 0 },
        { label: "员工手机号", value: 1 }
      ],
      totals: 0,
      pages: 0,
      shows: "list",
      searchName: "",
      time: [],
      visible: "",
      Val: {},
      Arr: []
    };
  },

  created() {
    this.getList();
  },
  methods: {
    handleSelectionChange(e) {
      this.Arr = e;
    },
    edit(e) {
      if (e) {
        this.Val = e;
      } else {
        let arr = [];
        this.Arr.forEach(ele => {
          arr.push(ele.member_id);
        });
        if (arr.length <= 0) return this.$message("请选择分销员！");
        this.Val.member_id = arr.join(",");
      }
      this.visible = "internalChain";
    },
    outDialog(e) {
      if (e) this.getList();
      this.visible = "";
      this.Val = {};
    },
    async departure(e) {
      let softOne = false;
      let json = {};
      await CURRENTSTAFFINFORMATION({ member_id: e.member_id }).then(
        ({ code, data, msg }) => {
          if (code === 200) {
            json = data;
          } else {
            this.$message.error(msg);
          }
        }
      );
      if (json.members > 0) {
        await this.$confirm(
          "该员工下有客户，请先修改员工关系链，再做离职操作！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消 ",
            type: "warning"
          }
        )
          .then(() => {
            softOne = true;
          })
          .catch(() => {
            softOne = true;
          });
      }
      if (softOne) {
        return false;
      }
      let softTwo = false;
      if (json.cashmoney > 0) {
        await this.$confirm(
          "该员工有待结算佣金，请先结算清员工佣金，再做离职操作！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消 ",
            type: "warning"
          }
        )
          .then(() => {
            softTwo = true;
          })
          .catch(() => {
            softTwo = true;
          });
      }
      if (softTwo) {
        return false;
      }
      await STAFFQUIT({ member_id: e.member_id }).then(res => {
        let { code, msg } = res;
        if (code === 200) {
          this.getList();
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    async del(id) {
      await this.$confirm("是否删除该员工！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消 ",
        type: "warning"
      })
        .then(() => {
          EDITSTAFFTOUSER({ member_id: id }).then(({ code, msg }) => {
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {});
    },
    reset() {
      this.selectThree = 0;
      this.selectVal = [];
      this.time = [];
      this.getList();
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 10,
        flag: "staff",
        stime: this.time ? this.time[0] : "",
        etime: this.time ? this.time[1] : 0,
        status: this.selectVal
      };
      if (this.selectThree === 0) {
        param.nick_name = this.searchName;
      } else {
        param.phone = this.searchName;
      }
      await DISTRIBUTORLIST(param).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
